<template>
	<view class="detail">
		<view class="flexbg" :style="{backgroundImage:'url('+ songDetail.al.picUrl +')'}"></view>
		<musichead :title="songDetail.name" :icon="true" color="white"></musichead>
		<view class="container">
			<scroll-view scroll-y="true">
				<!-- 播放器 -->
				<view class="detail-play" @tap="handleToPlay" v-show="!songIsLoading">
					<view class="play_bar"></view>
					<image :src="songDetail.al.picUrl" :class="{ 'detail-play-run' : isplayrotate }"></image>
					<text class="iconfont" :class="playicon"></text>
				</view>
				<!-- 歌词 -->
				<view class="detail-lyric" v-show="!songIsLoading">
					<view class="detail-lyric-wrap"
						:style="{ transform : 'translateY(' +  - (lyricIndex - 1) * 82  + 'rpx)' }">
						<view class="detail-lyric-item" :class="{ active : lyricIndex == index}"
							v-for="(item,index) in songLyric" :key="index">{{ item.lyric }}</view>
					</view>
				</view>
				<!-- 相似歌曲 -->
				<view class="detail-like" v-show="!simiIsLoading">
					<view class="detail-like-title">喜欢这首歌的人也听</view>
					<view class="detail-like-list">
						<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index"
							@tap="handleToSimi(item.id)">
							<view class="detail-like-img">
								<image :src="item.album.picUrl" mode=""></image>
							</view>
							<view class="detail-like-song">
								<view>{{item.name}}</view>
								<view>
									<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70"
										src="../../static/dujia.png" mode=""></image>
									<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png" mode="">
									</image>
									{{item.artists[0].name}} - {{item.name}}
								</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="detail-comment" v-show="!commentIsLoading">
					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-head">
								<view class="detail-comment-name">
									<view>{{ item.user.nickname }}</view>
									<view>{{ item.time | formatTime }}</view>
								</view>
								<view class="detail-comment-like">
									{{ item.likedCount | formatCount }} <text class="iconfont iconlike"></text>
								</view>
							</view>
							<view class="detail-comment-text">
								{{ item.content }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	import {
		songDetail,
		songUrl,
		songLyric,
		songSimi,
		songComment
	} from '@/common/api.js'
	export default {
		data() {
			return {
				songDetail: {
					al: {
						picUrl: '' //歌曲图片
					}
				},
				songSimi: [], //相似歌曲推荐
				songComment: [], //评论
				songLyric: [], //歌词
				lyricIndex: 0, //当前歌词下标
				playicon: 'iconpause', //默认暂停icon
				isplayrotate: false,
				songIsLoading: true,
				simiIsLoading: true,
				commentIsLoading: true,
			}
		},
		onLoad(options) {
			this.playMusic(options.songId);
			this.getSimiMusic(options.songId);
			this.getComments(options.songId)
		},
		onUnload() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		onHide() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		methods: {
			//播放音乐
			playMusic(songId) {
				// this.$store.commit('NEXT_ID',songId);
				uni.showLoading({
					title: '加载中...'
				})
				this.isLoading = true;
				Promise.all([songDetail(songId), songLyric(songId), songUrl(songId)]).then((res) => {
					if (res[0][1].data.code == '200') {
						this.songDetail = res[0][1].data.songs[0];
						console.log(this.songDetail)
					}
					if (res[1][1].data.code == '200') {
						// 获取歌词的字符串，例如：[00:00.000] 作词 : 蔡依林/阿信\n[00:00.754] 作曲 : 剃刀蔣/蔡依林\n[00:01.508]
						let lyric = res[1][1].data.lrc.lyric;
						// 将歌词并进行分割
						// console.log(lyric.split(/[\[\]]+/))
						lyric = lyric.split(/[\[\]]+/)
						let result = [];
						let i = 1;
						while (i < lyric.length) {
							result.push({
								time: this.formatTimeToSec(lyric[i]),
								lyric: lyric[i + 1]
							});
							i = i + 2
						}
						// let reg = /\[([^\]]+)\]([^[]+)/g;
						// $0表示整体，$1表示第一个子项，$2表示第二个子项
						// lyric.replace(reg, ($0, $1, $2) => {
						// 	// console.log($0,$1,$2)
						// 	result.push({
						// 		time: this.formatTimeToSec($1),
						// 		lyric: $2
						// 	});
						// });
						this.songLyric = result;
					}
					if (res[2][1].data.code == '200') {

						// #ifdef MP-WEIXIN
						this.bgAudioMannager = uni.getBackgroundAudioManager();
						this.bgAudioMannager.title = this.songDetail.name;
						// #endif

						// #ifdef H5 || APP-PLUS
						if (!this.bgAudioMannager) {
							this.bgAudioMannager = uni.createInnerAudioContext();
						}
						// #endif

						this.playicon = 'iconbofang1';
						this.isplayrotate = false; //默认不旋转

						// 播放音乐地址
						this.bgAudioMannager.src = res[2][1].data.data[0].url;
						this.listenLyricIndex();

						// 音乐播放
						this.bgAudioMannager.onPlay(() => {
							this.playicon = 'iconpause';
							this.isplayrotate = true;
							this.listenLyricIndex();
						});

						// 音乐暂停
						this.bgAudioMannager.onPause(() => {
							this.playicon = 'iconbofang1';
							this.isplayrotate = false;
							this.cancelLyricIndex();
						});

						// 播放结束
						this.bgAudioMannager.onEnded(() => {
							this.playMusic(songId);
						});
					}
					this.songIsLoading = false;
					uni.hideLoading();
				});
			},
			// 格式化时间
			formatTimeToSec(time) {
				var arr = time.split(':');
				// 将时间转化秒
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			// 点击播放或暂停
			handleToPlay() {
				if (this.bgAudioMannager.paused) {
					this.bgAudioMannager.play();
				} else {
					this.bgAudioMannager.pause();
				}
			},
			// 获取当前歌词
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for (var i = 0; i < this.songLyric.length; i++) {
						// 最后一句歌词的时间 < 播放时间，表示音乐播放完毕，歌词停留在最后一句
						if (this.songLyric[this.songLyric.length - 1].time < this.bgAudioMannager.currentTime) {
							this.lyricIndex = this.songLyric.length - 1;
							break;
						}
						// 歌词的时间 < 播放时间  &&  下一句的时间>播放时间 
						if (this.songLyric[i].time < this.bgAudioMannager.currentTime && this.songLyric[i + 1]
							.time > this.bgAudioMannager.currentTime) {
							this.lyricIndex = i;
						}
					}
				});
			},
			// 歌词暂停
			cancelLyricIndex() {
				clearInterval(this.timer);
			},
			//获取相似歌曲去
			getSimiMusic(songId) {
				songSimi(songId).then(res => {
					console.log(res)
					if (res[1].data.code == '200') {
						this.songSimi = res[1].data.songs;
						this.simiIsLoading = false;
					}
				})
			},
			// 展开新的页面
			handleToSimi(songId) {
				this.playMusic(songId);
				this.getSimiMusic(this.songId);
				this.getComments(this.songId)
			},
			//获取评论
			getComments(songId) {
				songComment(songId).then(res => {
					console.log(res)
					if (res[1].data.code == '200') {
						this.songComment = res[1].data.hotComments;
						this.commentIsLoading = false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.flexbg::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .8);
	}

	.detail {
		overflow: hidden;
	}

	.detail-play {
		width: 580rpx;
		height: 580rpx;
		background: url(~@/static/disc.png);
		background-size: cover;
		margin: 210rpx auto 44rpx auto;
		position: relative;
	}

	/* 杆子旋转 */
	.play_bar {
		width: 170rpx;
		height: 266rpx;
		background: url(~@/static/needle.png);
		background-size: cover;
		position: absolute;
		left: 110rpx;
		right: 0;
		top: -150rpx;
		z-index: 10;
		margin: auto;

	}

	.detail-play image {
		width: 380rpx;
		height: 380rpx;
		border-radius: 50%;
		position: absolute;
		/* 上下左右的margin均可以无限延伸 */
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		animation: 10s linear infinite move;
		/* 默认不转动 */
		animation-play-state: paused;
	}

	@keyframes move {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.detail-play text {
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		color: white;
	}

	/* 转盘转动 */
	.detail-play .detail-play-run {
		animation-play-state: running;
		transform: rotate(0)
	}

	.detail-lyric {
		height: 246rpx;
		line-height: 82rpx;
		font-size: 32rpx;
		text-align: center;
		color: #949495;
		overflow: hidden;
	}

	.active {
		color: white;
	}

	.detail-lyric-wrap {
		transition: .5s;
	}

	.detail-lyric-item {
		height: 82rpx;
	}

	.detail-like {
		margin: 0 32rpx;
	}

	.detail-like-title {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.detail-like-list {}

	.detail-like-item {
		display: flex;
		margin-bottom: 38rpx;
		align-items: center;
	}

	.detail-like-img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 15rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.detail-like-img image {
		width: 100%;
		height: 100%;
	}

	.detail-like-song {
		flex: 1;
	}

	.detail-like-song view:nth-child(1) {
		color: white;
		font-size: 30rpx;
		width: 70vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10rpx;
	}

	.detail-like-song view:nth-child(2) {
		font-size: 22rpx;
		color: #a2a2a2;
		width: 70vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.detail-like-song image {
		width: 34rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.detail-like-item text {
		font-size: 50rpx;
		color: #877764;
	}

	.detail-comment {
		margin: 0 32rpx;
	}

	.detail-comment-title {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.detail-comment-item {
		display: flex;
		margin-bottom: 28rpx;
	}

	.detail-comment-img {
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 18rpx;
	}

	.detail-comment-img image {
		width: 100%;
		height: 100%
	}

	.detail-comment-content {
		flex: 1;
		color: #cac9cd;
	}

	.detail-comment-head {
		display: flex;
		justify-content: space-between;
	}

	.detail-comment-name view:nth-child(1) {
		font-size: 24rpx;
	}

	.detail-comment-name view:nth-child(2) {
		font-size: 20rpx;
	}

	.detail-comment-like {
		font-size: 30rpx;
	}

	.detail-comment-text {
		line-height: 40rpx;
		color: white;
		font-size: 28rpx;
		margin-top: 16rpx;
		border-bottom: 1px #727277 solid;
		padding-bottom: 40rpx;
	}
</style>
